<template>
  <div class="layout">
    <!-- 左边大盒子，内部也分上下两块：1:3 -->
    <div class="left-box">
      <div class="top-box">
        <el-popover placement="bottom" :width="200" trigger="click">
          <template #reference>
            <div class="sub-box-1">
              <text>圈选店人货</text>
              <img src="@/assets/img/jiao@2x.png" alt="" class="jiao" />
            </div>
          </template>
          <Popup />
        </el-popover>
        <div class="sub-box-2">
          <img src="@/assets/img/store@2x.png" alt="" class="sub2_1" />
          <text class="sub2-text">店</text>
          <text class="sub2-text1">-选择门店，圈定人货范围，按店开展营销</text>
          <img src="@/assets/img/_situation@2x.png" class="imag-sub2" />
          <div class="sub2-text2">主要区域：广州</div>
        </div>
        <div class="sub-box-3">
          <div class="sub3">
            <div class="card" v-for="i in 5" :key="i">
              <text class="card-top">单价</text>
              <text class="card-bottom">￥1000</text>
            </div>
          </div>
          <div class="sub3-box1">
            <div class="sub3-son">导入门店</div>
          </div>
        </div>
      </div>
      <div class="bottom-box">
        <div class="box-main">
          <keep-alive>
            <component :is="reversed ? RightView : LeftView" />
          </keep-alive>
        </div>

        <button class="swap-button" @click="toggle" />
        <div class="divider-vertical"></div>
        <div class="box-main">
          <keep-alive>
            <component :is="reversed ? LeftView : RightView" />
          </keep-alive>
        </div>
      </div>
    </div>
    <div class="gou"></div>
    <div class="imags" @click="startImageSwitch">
      <img :src="imageList[currentImageIndex]" alt="" class="imagss" />
    </div>
    <!-- 右边两个小盒子 -->
    <div class="right-box">
      <div class="small-box small-box-1">
        <div class="top-ine">按店推荐</div>
        <div class="samll-box11">
          <div class="top-part1" style="margin-left: 0px">
            <img
              src="@/assets/img/image.png@2x.png"
              alt=""
              class="sub2_1"
              style="margin-left: 0px"
            />
            <text class="sub2-text">AI匹配</text>
            <text class="sub2-text1">-智能生成匹配方案</text>
          </div>
        </div>
        <div class="samll-box12">
          <div class="samllx">
            <img src="@/assets/img/check@2x.png" alt="" class="img-samll" />
            <text class="text-samll"
              >已使用ICF算法为23家门店生成人货匹配方案</text
            >
            <div class="sub3-son">更换算法</div>
          </div>
          <div class="samlly">
            <div class="samlly-box">
              <div class="samllx">
                <img src="@/assets/img/check@2x.png" alt="" class="img-samll" />
                <text class="text-samll">推荐38款商品（1,344件库存）</text>
              </div>
              <div class="samlly-each" ref="chartRef"></div>
            </div>
            <div class="samlly-box">
              <div class="samllx">
                <img src="@/assets/img/check@2x.png" alt="" class="img-samll" />
                <text class="text-samll">推荐6,921人</text>
              </div>
              <div class="samlly-each" ref="chartRef1"></div>
            </div>
          </div>
        </div>
        <div class="samll-bottom">查看方案明细</div>
      </div>
      <div class="gous"></div>
      <div class="small-box small-box-2">
        <div class="inner-box top-inner">
          <div class="top-ine">精准营销</div>
          <div class="top-part">
            <img
              src="@/assets/img/place-big@2x.png"
              alt=""
              class="sub2_1"
              style="margin-left: 0px"
            />
            <text class="sub2-text">场</text>
            <text class="sub2-text1">-营销活动配置</text>
          </div>
          <div class="bottom-part">
            <div class="bottom-part-box1">
              <div
                v-for="tab in tabs"
                :key="tab.value"
                class="tab-item"
                :class="{ active: activeTab === tab.value }"
                @click="activeTab = tab.value"
              >
                {{ tab.label }}
              </div>
            </div>
            <div class="bottom-part-box2">
              <div v-if="activeTab === 'get'" class="item-get">
                <div
                  class="item-boxs1"
                  v-for="(item, index) in list"
                  :key="index"
                  :class="{ selected: selectedIndex === index }"
                  @click="selectedIndex = index"
                >
                  <img :src="item.img" alt="" class="item-ima" />
                  <div class="item-bottom">{{ item.label }}</div>
                </div>
              </div>
              <div v-else-if="activeTab === 'content'">这是内容部分</div>
              <div v-else-if="activeTab === 'fund'">这是基金部分</div>
            </div>
          </div>
        </div>
        <div class="inner-box bottom-inner">
          <div class="inner-box1">
            <img
              src="@/assets/img/touch@2x.png"
              alt=""
              class="sub2_1"
              style="margin-left: 0px"
            />
            <text class="sub2-text">触达</text>
            <text class="sub2-text1">-多点触达提高转化率</text>
          </div>
          <div class="inner-box2">
            <div
              class="item-box"
              v-for="(items, index) in lists"
              :key="index"
              :class="{ selecteds: selected === index }"
              @click="selected = index"
            >
              <img :src="items.img" alt="" class="item-ima" />
              <div class="item-bottom">
                {{ items.label }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from "vue";
import LeftView from "./components/LeftView.vue";
import RightView from "./components/RightView.vue";
import Popup from "./components/Popup.vue";
import * as echarts from "echarts";
const reversed = ref(false);
const toggle = () => {
  reversed.value = !reversed.value;
};

const tabs = [
  { label: "获得", value: "get" },
  { label: "内容", value: "content" },
  { label: "基金", value: "fund" },
];

const activeTab = ref("get");

const chartRef = ref<HTMLElement | null>(null);
const chartRef1 = ref<HTMLElement | null>(null);

let chart1: echarts.ECharts | null = null;
let chart2: echarts.ECharts | null = null;

const initChart1 = () => {
  if (!chartRef.value) return;
  chart1 = echarts.init(chartRef.value);
  chart1.setOption(getOption1());
};

const initChart2 = () => {
  if (!chartRef1.value) return;
  chart2 = echarts.init(chartRef1.value);
  chart2.setOption(getOption2());
};

const getOption1 = () => ({
  tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
  grid: { left: "20%", right: "10%", bottom: "10%", top: "10%" },
  xAxis: {
    type: "value",
    axisLabel: { show: false },
    splitLine: { show: false },
    axisLine: { show: false },
    axisTick: { show: false },
  },
  yAxis: {
    type: "category",
    data: ["畅销", "滞销", "平销"],
    splitLine: { show: false },
    axisLine: { show: false },
    axisTick: { show: false },
  },
  series: [
    {
      name: "数值",
      type: "bar",
      data: [12, 5, 15],
      label: { show: true, position: "right" },
      itemStyle: {
        color: "rgba(138, 169, 252, 1)",
        borderRadius: [10, 10, 10, 10],
      },
      barWidth: 10,
    },
  ],
});

const getOption2 = () => ({
  tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
  grid: { left: "20%", right: "20%", bottom: "10%", top: "10%" },
  xAxis: {
    type: "value",
    axisLabel: { show: false },
    splitLine: { show: false },
    axisLine: { show: false },
    axisTick: { show: false },
  },
  yAxis: {
    type: "category",
    data: ["重要价值", "重要挽留", "一般价值", "一般挽留"],
    splitLine: { show: false },
    axisLine: { show: false },
    axisTick: { show: false },
  },
  series: [
    {
      name: "数值",
      type: "bar",
      data: [2000, 1300, 1800, 821],
      label: { show: true, position: "right" },
      itemStyle: {
        color: "rgba(138, 169, 252, 1)",
        borderRadius: [10, 10, 10, 10],
      },
      barWidth: 10,
    },
  ],
});

onMounted(() => {
  initChart1();
  initChart2();
  window.addEventListener("resize", resizeAllCharts);
});

const resizeAllCharts = () => {
  chart1?.resize();
  chart2?.resize();
};

onBeforeUnmount(() => {
  window.removeEventListener("resize", resizeAllCharts);
  chart1?.dispose();
  chart2?.dispose();
});

import img1 from "@/assets/img/1@2x.png";
import img2 from "@/assets/img/2@2x.png";
import img3 from "@/assets/img/3@2x.png";

const imageList = [img1, img2, img3];

const currentImageIndex = ref(0);

const startImageSwitch = () => {
  currentImageIndex.value = 0;
  let step = 0;

  const interval = setInterval(() => {
    step++;
    currentImageIndex.value = step;
    if (step >= imageList.length - 1) {
      clearInterval(interval);
    }
  }, 300);
};
interface Item {
  img: string;
  label: string;
}
const selectedIndex = ref<number>(1);
const selected = ref<number>(0);
const list = ref<Item[]>([
  {
    img: new URL("@/assets/list/priority@2x.png", import.meta.url).href,
    label: "权益",
  },
  {
    img: new URL("@/assets/list/_coupon@2x.png", import.meta.url).href,
    label: "优惠券",
  },
  {
    img: new URL("@/assets/list/discount@2x.png", import.meta.url).href,
    label: "促销",
  },
  {
    img: new URL("@/assets/list/_regular@2x.png", import.meta.url).href,
    label: "常态化",
  },
  {
    img: new URL("@/assets/list/reality@2x.png", import.meta.url).href,
    label: "引流到店",
  },
]);
const lists = ref<Item[]>([
  {
    img: new URL("@/assets/list2/_works@2x.png", import.meta.url).href,
    label: "导购任务",
  },
  {
    img: new URL("@/assets/list2/_sending@2x.png", import.meta.url).href,
    label: "企微群发",
  },
  {
    img: new URL("@/assets/list2/_Booking@2x.png", import.meta.url).href,
    label: "订阅消息",
  },
  {
    img: new URL("@/assets/list2/_message@2x.png", import.meta.url).href,
    label: "短信",
  },
  {
    img: new URL("@/assets/list2/touching@2x.png", import.meta.url).href,
    label: "智能触达",
  },
]);
</script>

<style scoped lang="scss">
@use "./index";
.layout {
  display: flex;
  height: 100%;
  padding: 10px;
  position: relative;
  box-sizing: border-box;
  background: rgb(232, 237, 255);
}
.left-box {
  flex: 2;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  margin-right: 20px;
  //gap: 20px;
  height: 100%;
  background: rgba(255, 255, 255, 1);
}

.top-box {
  display: flex;
  flex: 1;
  flex-direction: column;
  //gap: 10px;
  position: relative;
  border-radius: 8px;
  // padding: 20px;
  margin: 10px 20px;
  background: rgba(252, 253, 255, 1);
  border: 1px solid rgba(189, 209, 255, 1);
}

/* 左下（3份） */
.bottom-box {
  display: flex;
  position: relative;
  flex: 3;
  border-radius: 8px;
  padding: 20px;
  margin: 0 20px 10px 20px;
  background: rgba(252, 253, 255, 1);
  border: 1px solid rgba(189, 209, 255, 1);
  align-items: center;
  justify-content: center;
}

/* 右边盒子容器 */
.right-box {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 公共样式 */
.small-box {
  //background-color: #d0d0ff;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  padding: 20px;
}

/* 比例控制 */
.small-box-1 {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
}
.small-box-2 {
  flex: 2;
  height: 300px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inner-box {
  border-radius: 6px;
  //padding: 16px;
}
.top-inner {
  position: relative;
  display: flex;
  height: 55%;
  flex: 6;
  flex-direction: column;
  border-radius: 8px;
  background: rgba(252, 253, 255, 1);
  border: 1px solid rgba(189, 209, 255, 1);
}
//
.bottom-inner {
  flex: 5;
  border-radius: 8px;
  background: rgba(252, 253, 255, 1);
  border: 1px solid rgba(189, 209, 255, 1);
  display: flex;
  flex-direction: column;
}
.box-man {
  transition: none;
}
.imags {
  position: absolute;
  display: flex;
  top: 145px;
  left: 805px;
  z-index: 999;
  cursor: pointer;
}
.imagss {
  width: 70px;
  height: 70px;
  display: flex;
  background-size: cover;
}
::v-deep(.custom-popover .el-popover__title) {
  text-align: center;
}
</style>
